<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用jsonp获取腾讯天气信息</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .container {

            padding-top: 15px;
        }

        .form-control {
            width: 30%;
        }
    </style>
</head>

<body>
    <div class="container">
        <form id="loginForm">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" name="username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" class="form-control" name="password" placeholder="请输入用密码">
            </div>
            <input type="button" class="btn btn-default" value="登录" id="loginBtn">
            <input type="button" class="btn btn-default" value="检测用户登录状态" id="checkLogin">
        </form>
    </div>
    <script src="../js/ajax.js"></script>
    <script>
        //获取登录按钮
        const loginBtn = document.getElementById('loginBtn');//获取检测登录状态按钮
        const checkLogin = document.getElementById('checkLogin');//获取登录表单
        const loginForm = document.getElementById('loginForm');//为登录按钮添加点击事件
        const success = (data) => {
            console.log(data)
        }
        loginBtn.onclick = function () {
            const callback = (xhr) => {
                //当发送跨域请求时，携带cookie信息
                xhr.withCredentials = true;
            }
            //将html表单转换为formData表单对象
            var formData = new FormData(loginForm);
            ajax({
                type: 'post',
                url: 'http://localhost:3001/login',
                data: formData,
                processData: false,//是否对数据进行处理
                contentType: false,//使用默认请求头
                success: success,
            })
        }
        checkLogin.onclick = function () {
            const callback = (xhr) => {
                //当发送跨域请求时，携带cookie信息
                xhr.withCredentials = true;
            }
            ajax({
                type: 'get',
                url: 'http://localhost:3001/checkLogin',
                data: '',
                processData: true,//是否对数据进行处理
                contentType: true,//使用默认请求头
                success: success,
                // callback: callback,
            })
        }


    </script>


</body>